<template>
	<view v-if="id==1">
		<!-- 积分 -->
		<view class="integral">
			<text class="title">近期积分记录</text>
			<view class="integral-box" v-for="(item,index) in listData" :key="index">
				<view class="left">
					<!-- 店名+什么方式的积分(次卡消费、前台充值、小程序会员充值) -->
					<text class="name">{{item.StockName}} {{item.FRemark}} 新增</text>
					<text class="tiem">{{item.FDate}}</text>
				</view>
				<view class="right">
					<text class="price">{{item.FPoint+item.FSetPoint}}</text>
					<text class="unit">积分</text>
				</view>
			</view>
			<uni-load-more style="width:100%" v-if="!listData || listData.length == 0" class="loadmore" :status="tabItem.loadingType"></uni-load-more>
		</view>
		<view class="integral-base">
			<view class="left">
				<text class="base-title">积分</text>
				<text class="price">{{integra}}</text>
			</view>
			<!-- <text class="topUp" @click="navTo()">积分商城<text class="yticon icon-you"></text></text> -->
		</view>
	</view>
	<view v-else>
		<!-- 余额 -->
		<view class="balance">
			<!-- <text class="title">近期余额记录</text> -->
			<view class="head" @click="onActive">
				<text :class="{'active': titleIndex==1}" :data-index="1">充值</text>
				<text :class="{'active': titleIndex==-1}" :data-index="-1">消费</text>
				<text :class="{'active': titleIndex==3}" :data-index="3">次卡</text>
			</view>
			<view class="data-box">
				<view v-show="!startDate">全部</view>
				<view v-show="startDate">{{startDate}}--{{endDate}}</view>
				<view @click="calendarVisible=true">选择时间</view>
			</view>
			<view class="balance-box" v-for="(item,index) in listData" :key="index">
				<view class="left" :class="{topUpleft: item.FDataType != 3}">
					<!-- 店名+什么方式的消费(次卡消费、前台充值、小程序会员充值) -->
					<text class="name">{{item.StockName}} {{item.FRemark}}
						{{item.FDataType==3?item.MemberTimeName+'卡--'+item.MemberTime+'次':''}}</text>
					<text class="tiem">{{item.FDate}}</text>
				</view>
				<view v-if="item.FDataType != 3" class="right">
					<view v-if="item.FDataType == -3" class="right">
						<text class="price">1</text>
						<text class="unit">次</text>
					</view>
					<view v-else class="right">
						<text class="price">{{(item.FAmount).toFixed(2)}}</text><text class="unit">元</text>
						<text v-if="item.FSetAmount!=0">赠送¥{{(item.FSetAmount).toFixed(2)}}</text>
					</view>
				</view>
				<view v-else class="right">
					<text class="price">{{item.MemberTimeAmt}}</text>
					<text class="unit">元</text>
				</view>
			</view>
			<uni-load-more style="width:100%" v-if="!listData || listData.length == 0" class="loadmore" :status="tabItem.loadingType"></uni-load-more>
		</view>
		<view class="balance-base">
			<view class="left">
				<text class="base-title">当前余额:</text>
				<text class="price">
					<text class="synbol">￥</text>
					{{money}}
				</text>
			</view>
			<text class="topUp" @click="navTo('/pages/MemberTopUp/MemberTopUp')">去充值</text>
		</view>
		<u-calendar v-model="calendarVisible" mode="range" @change="onDateChange"></u-calendar>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore,
		},
		data() {
			return {
				calendarVisible: false,
				id: 0,
				listData: [],
				pageindex: 0,
				money: 0,
				integra: 0,
				totalNumber: 0,
				loadingType: 'more', //加载更多状态
				titleIndex: 1, //tab 切换状态
				startDate: '',
				endDate: '',
			};
		},
		onLoad(options) {
			this.id = options.id;
			let title = '';
			if (this.id == 0) {
				title = '余额记录';
				this.balance('MemberShop/GetMemberDeposit');
			} else {
				title = '积分记录';
				this.balance('MemberShop/GetMemberPoint');
			}
			uni.setNavigationBarTitle({
				title
			})
		},
		onReachBottom() {
			if (this.id == 0) {
				this.balance('MemberShop/GetMemberDeposit');
			} else {
				this.balance('MemberShop/GetMemberPoint');
			}
		},
		methods: {
			onDateChange(e) {
				// console.log('data',e);
				this.startDate = e.startDate
				this.endDate = e.endDate
				this.balance('MemberShop/GetMemberDeposit')
			},
			navTo(url) {
				uni.navigateTo({
					url: url,
				})
			},
			async balance(url) {
				// this.pageindex++;
				let list = await this.$util.util(url, {
					DataType: this.titleIndex || '',
					DateStar: this.startDate || '',
					DateEnd:this.endDate || '',
					PageIndex: this.pageindex,
					PageSize: 20,
				}, 'GET');
				let member = uni.getStorageSync('Members');
				this.integra = member[0].Ponit;
				this.listData = this.listData.concat(list);
				this.money = this.listData[0].FDataType == -3 ? member[0].Amount : this.listData[0].FLastAmount;
				this.totalNumber = this.listData[0].FRowCount;
				//判断是否还有下一页，有是more  没有是nomore
				this.loadingType = this.listData.length >= this.listData[0].FRowCount ? 'nomore' : 'more';
			},
			//积分
			// integral(){
			// 	this.$util.util('MemberShop/GetMemberPoint',{PageIndex: 1,PageSize: 10,},'GET').then(res=>{
			// 		console.log(res);
			// 		this.listData = res;
			// 		this.totalNumber = res[0].FRowCount;
			// 	}).catch(error=>console.log(error));
			// },

			//点击切换
			onActive(e) {
				this.titleIndex = e.target.dataset.index
				this.balance('MemberShop/GetMemberDeposit')
			},
		}
	}
</script>

<style lang="scss">
	.title {
		background: #F9F9F9;
		color: #191919;
		font-size: 24upx;
		line-height: 92upx;
		width: 100%;
		padding-left: 30upx;
	}

	.head {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		background-color: #fff;
		box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
		display: flex;
		justify-content: space-around;
		position: fixed;
		top: 0upx;

		text {
			padding: 0 50upx;
		}
	}

	.active {
		border-bottom: 2upx solid $base-color;
	}

	.box {
		padding: 140upx 20upx 0 20upx !important;
	}
	.data-box{
		width: 100%;
		display:flex;
		justify-content: space-between;
		align-items: center;
		margin-top:100upx;
		padding:20upx 28upx;
		background-color:#fefefe;
	}
	.balance,
	.integral {
		display: flex;
		flex-wrap: wrap;

		.balance-box:last-child,
		.integral-box:last-child {}

		.balance-box,
		.integral-box {
			border-bottom: 2upx solid #F9F9F9;
			height: auto;
			width: 100%;
			padding:0 20upx;
			display:flex;
			justify-content: space-between;
			align-items: center;
			.left {
				width: 100%;
				font-size: 28upx;
				// line-height: 50upx;
				.name {
					color: #707070;
					width: 100%;
					float: left;
				}
				.tiem {
					color: #A7A7A7;
					width: 100%;
					float: left;
				}
			}

			.right {
				color: #111111;
				display:flex;
				align-items: center;
				flex-shrink: 0;
				.price {
					line-height: 100upx;
					font-size: 20px;
					display: inline-block;
				}

				.unit {
					font-size: 12px;
					line-height: 24upx;
					display: inline-block;
					vertical-align: top;
				}
			}
		}
	}

	.balance-base,
	.integral-base {
		position: fixed;
		bottom: env(safe-area-inset-bottom);
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			width: 100%;
			height: 100upx;
			padding-left: 28upx;
			color: #191919;
			display: flex;
			align-items: center;
			background: #ffdd55;

			.base-title {
				font-size: 28upx;
				line-height: 38upx;
				display: inline-block;
				vertical-align: top;
			}

			.price {
				margin-left: 10upx;
				font-size: 56upx;
				line-height: 80upx;

				.synbol {
					font-size: 26upx;
				}
			}
		}

		.topUp {
			height: 100upx;
			display: flex;
			align-items: center;
			padding: 0 28upx;
			color: #191919;
			line-height: 80upx;
			background: rgba(255, 0, 0, 1);
			color: #fff;
			flex-shrink: 0;
		}
	}

	.loadmore {
		margin-bottom: 85upx;
	}

	// .topUpleft {
	// 	width: 400rpx !important;
	// }

	// .integral{
	// 	display: flex;
	// 	flex-wrap: wrap;
	// 	.integral-box{

	// 	}
	// }
</style>
